<template>
  <div style="margin-top: 10px" class="app-contain">
    <el-row :gutter="50">
      <el-col :span="15">
        <el-card>
          <el-table
            v-loading="listLoading"
            :data="tableData"
            fit
            highlight-current-row
            style="width: 100%"
            @row-click="itemSelect"
            @sort-change="changeTableSort"
            @filter-change="filterHandler"
          >
            <el-table-column
              prop="shortTitle"
              label="题干"
              show-overflow-tooltip
            />
            <el-table-column
              prop="questionType"
              label="题型"
              :formatter="questionTypeFormatter"
              width="100"
              :filters="[
                { value: 1, text: '单选题' },
                { value: 2, text: '多选题' },
                { value: 3, text: '判断题' },
                { value: 4, text: '填空题' },
                { value: 5, text: '简答题' },
              ]"
              :column-key="'questionTypeKey'"
            />
            <el-table-column
              prop="difficult"
              label="难度"
              width="80"
              :sortable="'custom'"
            />
            <el-table-column
              prop="subjectName"
              label="学科"
              width="80"
              :filters="subjectFilter"
              :column-key="'subjectKey'"
              show-overflow-tooltip
            />
            <el-table-column
              prop="createTime"
              label="做题时间"
              width="170"
              :sortable="'custom'"
            />
            <el-table-column align="right">
              <template slot="header" slot-scope="scope">
                <el-input
                  v-model="queryParam.searchTitle"
                  size="small"
                  placeholder="输入关键字搜索题目"
                  @input="input"
                />
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :background="false"
            :page.sync="queryParam.pageIndex"
            :limit.sync="queryParam.pageSize"
            @pagination="search"
            style="margin-top: 20px"
          />
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card class="record-answer-info">
          <el-form>
            <el-form-item>
              <QuestionAnswerShow
                :qType="selectItem.questionType"
                :qLoading="qAnswerLoading"
                :question="selectItem.questionItem"
                :answer="selectItem.answerItem"
              />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import Pagination from "@/components/Pagination";
import questionAnswerApi from "@/api/questionAnswer";
import QuestionAnswerShow from "../exam/components/QuestionAnswerShow";
import subjectApi from "@/api/subject";
import { scrollTo } from "@/utils/scroll-to";
export default {
  components: { Pagination, QuestionAnswerShow },
  data() {
    return {
      queryParam: {
        pageIndex: 1,
        pageSize: 10,
        sort: "id desc",
        subjectList: [],
        questionTypeList: [],
        searchTitle: "",
        difficult: null
      },
      subjectFilter: [],
      listLoading: false,
      subjectFilter: [],
      tableData: [],
      total: 0,
      searchTitle: "",
      qAnswerLoading: false,
      selectItem: {
        questionType: 0,
        questionItem: null,
        answerItem: null,
      },
    };
  },
  created() {
    this.search();
    let _this = this;
    subjectApi.list().then((res) => {
      console.log(res.response);
      for (let item of res.response) {
        var x = new Object();
        x.value = item.id;
        x.text = item.name;
        _this.subjectFilter.push(x);
      }
    });
    scrollTo(0, 800);
  },
  methods: {
    input() {
      this.search();
    },
    filterHandler(filters) {
      if (filters.questionTypeKey) {
        this.queryParam.questionTypeList = filters.questionTypeKey;
      }
      if (filters.subjectKey) {
        this.queryParam.subjectList = filters.subjectKey;
      }
      this.search();
      // const property = column["property"];
      // this.queryParam.paperType = value;
    },
    changeTableSort(column) {
      //获取字段名称和排序类型
      var fieldName = column.prop;
      var sortingType = column.order;
      this.queryParam.pageIndex = 1;
      let x = "";
      if (fieldName == "createTime") {
        x = "create_time";
      } else if (fieldName == "difficult") {
        x = "difficult";
      }
      if (sortingType == "descending") {
        this.queryParam.sort = x + " desc";
      } else {
        this.queryParam.sort = x + " asc";
      }
      this.search();
    },
    search() {
      this.listLoading = true;
      let _this = this;
      questionAnswerApi.pageList(this.queryParam).then((data) => {
        const re = data.response;
        _this.tableData = re.list;
        _this.total = re.total;
        _this.queryParam.pageIndex = re.pageNum;
        _this.listLoading = false;
        if (re.list.length !== 0) {
          _this.qAnswerShow(re.list[0].id);
        }
      });
    },
    itemSelect(row, column, event) {
      this.qAnswerShow(row.id);
    },
    qAnswerShow(id) {
      let _this = this;
      this.qAnswerLoading = true;
      questionAnswerApi.select(id).then((re) => {
        let response = re.response;
        console.log(response);
        _this.selectItem.questionType = response.questionVM.questionType;
        _this.selectItem.questionItem = response.questionVM;
        _this.selectItem.answerItem = response.questionAnswerVM;
        _this.qAnswerLoading = false;
      });
    },
    questionTypeFormatter(row, column, cellValue, index) {
      return this.enumFormat(this.questionTypeEnum, cellValue);
    },
  },
  computed: {
    ...mapGetters("enumItem", ["enumFormat"]),
    ...mapState("enumItem", {
      questionTypeEnum: (state) => state.exam.question.typeEnum,
    }),
  },
};
</script>

<style lang="scss" scoped>
</style>
